<template>
  <view class="page">
    <nav-bar title="编辑资料" />
    <view class="container">
      <view class="list_box mt-14 pb-20">
        <view class="list_item  flex_a_c">
          <view class="list_txt">
            <font class="require">*</font>头像
          </view>
          <div class="profile_photo flex1 flex_r pr-40">
            <button class="avatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
              <image class="avatar_img" mode="aspectFill"
                :src="form.headOssUrl || 'https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/avatar_init.png'" />
            </button>
            <!-- <upload-cropper :showDelBtn="false" :maxCount="1" radius :uploadW="80" :radio="[1, 1]"
              v-model:url="form.headOssUrl">
            </upload-cropper> -->
          </div>
        </view>
        <view class="list_item  flex_a_c">
          <view class="list_txt">
            <!-- <font class="require">*</font> -->
           <font class="require">*</font>姓名
          </view>
          <input class="flex1 tr" :maxlength="10" v-model="form.nikeName" placeholder-class='inputPlaceHolder' placeholder="请输入(必填)" />
        </view>
        <view class="list_item flex_r">
          <view class="list_txt">
            <!-- <font class="require">*</font> -->
            <font class="require">*</font>职业
          </view>
          <picker-multiple-select class="flex1" v-model="form.occupation" :list="dicList.occupationList" />
        </view>
        <view class="list_item  flex_b_c">
          <view class="list_txt">
            <!-- <font class="require">*</font> -->
            <font class="require">*</font>性别
          </view>
          <view class="flex_r">
            <view @click="form.gender = 0" :class="['list_tag', form.gender === 0 && 'on']">男</view>
            <view @click="form.gender = 1" :class="['list_tag', form.gender === 1 && 'on']">女</view>
          </view>
          <!-- <singlePicker class="flex1" v-model="form.gender" :range="[{ id: 0, dicName: '男' }, { id: 1, dicName: '女' }]" /> -->
        </view>
        <view class="list_item  flex_b_c">
          <view class="list_txt"><font class="require">*</font>从艺经历</view>
          <view class="flex_r">
            <view @click="form.artFlag = 0" :class="['list_tag', form.artFlag === 0 && 'on']">无</view>
            <view @click="form.artFlag = 1" :class="['list_tag', form.artFlag === 1 && 'on']">有</view>
          </view>
            <!-- <singlePicker class="flex1" v-model="form.artFlag"
              :range="[{ id: 0, dicName: '无' }, { id: 1, dicName: '有' }]" /> -->
        </view>
        <view class="list_item  flex_a_c">
          <view class="list_txt">
            <!-- <font class="require">*</font> -->
            <font class="require">*</font>入行年限
          </view>
          <singlePicker class="flex1" v-model="form.entryYear" :range="dicList.entryYearList" />
        </view>
       
        <view class="list_item flex_r border_14">
          <view class="list_txt">
            <!-- <font class="require">*</font> -->
            <font class="require">*</font>期望工作地址
          </view>
          <mutiplePicker class="flex1" :editIdArr="[form.province, form.city]"
            @on-change="arr => ([form.province, form.city] = arr)" :range="dicList.cityList" :rangeKey="'areaName'" />
        </view>

        <view class="list_item pr border_none">
          <view class="list_txt"><font class="require">*</font>代表作/活动</view>
          <textarea class="flex1 remarks_textarea" v-model="form.reprWorks" maxlength="300"
            placeholder-class='inputPlaceHolder' placeholder="请输入代表作品/ 活动  例：《钢铁是怎样炼成的》、《我和我的祖国》 、《东方新丝路大赛》" />
          <!-- <text v-if="form.reprWorks" class="showLimitword">{{ form.reprWorks.length }} / 300</text> -->
        </view>
        <view class="list_item pr pb-10 border_none">
          <view class="list_txt"><font class="require">*</font>个人简介</view>
          <textarea class="flex1 remarks_textarea" v-model="form.remark" maxlength="300"
            placeholder-class='inputPlaceHolder' placeholder="请输入个人简介" />
          <!-- <text v-if="form.reprWorks" class="showLimitword">{{ form.reprWorks.length }} / 300</text> -->
        </view>
        <view class="list_item">
          <view class="list_txt"><font class="require">*</font>获奖经历</view>
          <view class="flex_a_c pr-22" v-for="(item, idx) in form.awards" :key="idx">
            <input class="flex1 lh-80 h_80" style="display: block;" v-model="item.name"
              placeholder-class='inputPlaceHolder' placeholder="例：2019年11月 最佳编剧奖" />
            <view class="flex_r ml-20" style="justify-content: flex-end;">
              <view v-if="form.awards.length > 1" @click="form.awards.splice(idx, 1)" class="add_btn flex_center">
                <image class="del_icon extend_click"
                  src="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/delete_icon.png" />
              </view>
              <view v-if="idx === form.awards.length - 1" class="extend_click ml-24 add_btn add_btn_confirm flex_center"
                @click="onAddAward(item, idx)"></view>
            </view>
          </view>
        </view>
        <view class="list_box mt-14 pb-20">
          <view class="tag_title border_none mb-19">
            <!-- <font class="require">*</font> -->
            <font class="prompt">*</font>艺人海报<text class="prompt pl-35">支持JPG/PNG/JPEG等格式</text>
          </view>
          <view class="pl-30">
            <!-- form.worksPosters.split().length === 1 && (form.coverUrl = form.worksPosters.split()[0]) -->
            <upload-cropper class="mb-40" :maxCount="99999" :uploadW="221" :radio="[2, 3]" v-model:url="form.imgUrls"
              @onSuccess="onUploadSuccess">
              <template v-slot:badge>
                <image class="badge" src="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/work_upload_cover.png">
                </image>
              </template>
              <template v-slot:footer="{ url }">
                <view v-if="form.coverUrl === url" class="cover_opt">已设为封面</view>
                <view v-else @click="form.coverUrl = url" class="cover_opt">设置为封面</view>
              </template>
            </upload-cropper>
          </view>
        </view>
        <view  class="list_box mt-14 pb-20 border_14">
          <view class="tag_title border_none mb-19">宣传视频<text class="prompt pl-35">支持MP4/MOV/AVI等格式，建议上传横屏视频</text></view>
          <view class="pl-25">
            <uploadVideo class="upload_video"
              uploadIcon="https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/upload_icon_video.png"
              :directory="'personInfo'" :accept="'video'" v-model:url="form.videoUrl" />
          </view>
        </view>

        <view class="list_item border_none flex_a_c">
          <view class="tips lh_60"><font class="require">*</font>以下信息非必填，建议填写，更好的展现自己</view>
        </view>
        <view class="list_item  flex_a_c">
          <view class="list_txt">抖音粉丝量</view>
          <input class="flex1 tr" type="number" maxlength="10" v-model="form.douyinFansNum" placeholder-class='inputPlaceHolder'
            placeholder="请输入抖音粉丝量" />
        </view>
        <view class="list_item  flex_a_c">
          <view class="list_txt">小红书粉丝量</view>
          <input class="flex1 tr" type="number" maxlength="10" v-model="form.redBookFansNum" placeholder-class='inputPlaceHolder'
            placeholder="请输入小红书粉丝量" />
        </view>
        <view class="list_item  flex_a_c">
          <view class="list_txt">微博粉丝量</view>
          <input class="flex1 tr" type="number" maxlength="10" v-model="form.weiboFansNum" placeholder-class='inputPlaceHolder'
            placeholder="请输入微博粉丝量" />
        </view>
        <view class="list_item  flex_a_c">
          <view class="list_txt">英文名字</view>
          <input class="flex1 tr" v-model="form.nickNameEn" placeholder-class='inputPlaceHolder' placeholder="请输入英文名字" />
        </view>
        <view class="list_item  flex_a_c">
          <view class="list_txt">邮箱</view>
          <input class="flex1 tr" v-model="form.email" placeholder-class='inputPlaceHolder' placeholder="请输入邮箱" />
        </view>
       
        <view class="list_item flex_r">
          <view class="list_txt">兴趣爱好</view>
          <picker-multiple-select class="flex1" v-model="form.interestLabel" :list="dicList.interestLabelList" />
        </view>
        <view class="list_item  flex_a_c">
          <view class="list_txt">国籍</view>
          <singlePicker class="flex1" v-model="form.countryId" rangeKey="countryCname" :range="dicList.countryList" />
        </view>
        <view class="list_item  flex_a_c">
          <view class="list_txt">民族</view>
          <input class="flex1 tr" v-model="form.race" placeholder-class='inputPlaceHolder' placeholder="请输入民族" />
        </view>
        <view class="list_item  flex_a_c">
          <view class="list_txt">出生地址</view>
          <input class="flex1 tr" v-model="form.birthplace" placeholder-class='inputPlaceHolder' placeholder="请输入出生地址" />
        </view>
        <view class="list_item flex_a_c">
          <view class="list_txt">出生日期</view>
          <picker class="flex1" mode="date" fields="day" :value="form.birthday"
            @change="({ detail: { value } }) => form.birthday = value">
            <view :class="['tr picker_txt lh-64', !form.birthday && 'empty_picker']">
              {{ form.birthday || '请填写生日' }}
            </view>
          </picker>
        </view>
        <view class="list_item  flex_a_c">
          <view class="list_txt">常驻地</view>
          <input class="flex1 tr" v-model="form.homeDomicile" placeholder-class='inputPlaceHolder'
            placeholder="请输入常驻地" />
        </view>
        <view class="list_item  flex_a_c">
          <view class="list_txt">人格类型</view>
          <singlePicker class="flex1" v-model="form.personalityType" :range="dicList.personalityTypeList" />
        </view>
        <view class="list_item  flex_a_c">
          <view class="list_txt">特长</view>
          <singlePicker class="flex1" v-model="form.specialty" :range="dicList.specialtyList" />
        </view>
        <view class="list_item  flex_a_c">
          <view class="list_txt">血型</view>
          <singlePicker class="flex1" v-model="form.bloodType" :range="dicList.bloodTypeList" />
        </view>
        <view class="list_item  flex_a_c">
          <view class="list_txt">星座</view>
          <singlePicker class="flex1" v-model="form.constellation" :range="dicList.constellationList" />
        </view>
        <view class="list_item  flex_a_c">
          <view class="list_txt">身高</view>
          <input class="flex1 tr" v-model="form.userHeight" placeholder-class='inputPlaceHolder'
            placeholder="请输入身高" />
          <text class="list_suffix">cm</text>
        </view>
        <view class="list_item  flex_a_c">
          <view class="list_txt">体重</view>
          <input class="flex1 tr" v-model="form.userWeight" placeholder-class='inputPlaceHolder'
            placeholder="请输入体重" />
          <text class="list_suffix">kg</text>
        </view>
      </view>
    </view>
    <view class="flex_center h_145 footer_fixed ">
      <view class="w_650 btns confirm" @click="onSubmit">保存</view>
    </view>
  </view>
</template>
<script setup>
import uploadCropper from "@/components/common/upload-cropper"
import uploadVideo from "@/components/common/uploadVideo"
import upload from "@/utils/upload"
import singlePicker from '@/components/common/singlePicker'
import mutiplePicker from '@/components/common/mutiplePicker'
import { getAllUserOccupation } from '@/api/common'
import storage from '@/utils/storage'
import pickerMultipleSelect from "@/components/common/pickerMultipleSelect"
import { reactive, onMounted, ref } from 'vue'
import { getOccDicName } from "@/api/ipElite"
import { onEditUserInfo, postUserInfo } from '@/api/center'
import { getSearchDic, getAllCountry, getAllCity } from '@/api/common'
import { deepClone } from '@/utils'
import { useStore } from "vuex";
let store = useStore()
import wxValidate from "@/utils/wxValidate"
const rules = {
  headOssUrl: { required: true },
  nikeName: { required: true }, // 名称
  occupation: { required: true }, // 职业
  gender: { required: true }, // 性别
  artFlag:  { required: true },//从艺经历
  entryYear: { required: true }, // 入行年限
  // douyinFansNum: { required: true }, // 抖音粉丝数
  // redBookFansNum: { required: true }, // 小红书粉丝数
  // weiboFansNum: { required: true },//微博粉丝数
  reprWorks: { required: true },//作品
  remark:  { required: true },//个人简介
  awards:  { required: true }, // 获奖经历
  province: { required: true }, // 省
  imgUrls: { required: true }, // 海报
  videoUrl: { required: true }, // 宣传视频

}
const messages = {
  headOssUrl: { required: '请上传头像' },
  nikeName: { required: '请输入您的姓名' }, // 名称
  occupation: { required: '请选择职业' }, // 职业
  gender: { required: '请选择性别' }, // 性别
  entryYear: { required: '请选择入行年限' }, // 入行年限
  artFlag:  { required: '请填写从艺经历' },//从艺经历
  // douyinFansNum: { required: '请填写抖音粉丝数' }, // 抖音粉丝数
  // redBookFansNum: { required: '请填写小红书粉丝数' }, // 小红书粉丝数
  // weiboFansNum: { required: '请填写微博粉丝数' },//微博粉丝数
  reprWorks: { required: '请填写代表作品' },//作品
  remark:  { required: '请填写个人简介' },//个人简介
  awards:  { required: '请填写获奖经历' }, // 获奖经历
  province: { required: '请填写省' }, // 省
  imgUrls: { required: '请上传海报' }, // 海报
  videoUrl: { required: '请上传宣传视频' }, // 宣传视频
}
let form = reactive({
  headOssUrl: '',
  nikeName: '',
  nickNameEn: '',
  gender: '',//性别
  douyinFansNum: '', // 抖音粉丝数
  redBookFansNum: '', // 小红书粉丝数
  weiboFansNum: '',//微博粉丝数

  email: '',//邮箱
  interestLabel: '',//兴趣爱好
  countryId: '',//国籍
  birthplace: '',//出生地址
  race: '',//民族
  birthday: '',//出生日期
  graduateSchool: '',//毕业院校
  city: '',//所在城市
  //补充信息
  specialty: '',//特长
  homeDomicile: '',//常驻地
  personalityType: '',//人格类型
  artFlag: '',//从艺经历
  agency: '',//主体公司
  constellation: '',//星座
  bloodType: '',//血型
  userHeight: '',//身高
  userWeight: '',//体重 
  ipDirection: '',
  occupation: '',//职业
  field: '',//擅长领域
  province: '',//省
  entryYear: '',//工作年限
  reprWorks: '',//代表作/活动：
  //简介
  remark: '',
  coverUrl: '',//作品封面 
  imgUrls: '',
  videoUrl: '', //作品视频
  awards: [{ name: '' }]//获奖经历
})
let dicList = reactive({
  occupationList: [],
  interestLabelList: [], // 兴趣爱好
  countryList: [], // 国家列表
  entryYearList: [{ id: 1, dicName: '3年以内' }, { id: 2, dicName: '3-5年' }, { id: 3, dicName: '5-10年' }, { id: 4, dicName: '10年以上' }],
  cityList: [],
  specialtyList: [], // 特长
  constellationList: [], // 星座
  bloodTypeList: [], // 血型
})
let userInfo = uni.getStorageSync('info')
let onEdit = async () => {
  const { code, data } = await onEditUserInfo()
  if (code === 200) {
    // entFlag: 0,//是否企业:0：个人；1：企业    个人职业类型
    Object.keys(form).forEach(key => {
      form[key] = data[key]
    })
    form.imgUrls = data.imgUrls ? data.imgUrls.join(',') : ''
    form.awards = data.awards ? data.awards.map(name => ({ name })) : [{ name: '' }]
    form.nikeName = data.nickName || data.userName
    console.log( form.nickName, ' form.nickName')
    // if (userInfo.entFlag) {
      // onChangeIpDirection('occupationList')
    // }
    // 获取兴趣爱好
    getDicList('interestLabelList', { dicType: 'sys_interest_dic' })
  }
}

let initValidate = (rules, messages) => {
  return new wxValidate(rules, messages)
}
let onChooseAvatar = async (event) => {
  let url = await upload(event.detail.avatarUrl)
  form.headOssUrl = url
}

onMounted(() => {

  onEdit()
  // 获取所有国家
  getCountryList()
  // 获取城市列表
  getCityList()
   // 获取所有职业列表
  getOccupationList()
  // 获取人格类型
  getDicList('personalityTypeList', { dicType: 'personality_type' })
  // 获取特长
  getDicList('specialtyList', { dicType: 'sys_specialty_dic' })
  // 请求血型
  getDicList('bloodTypeList', { dicType: 'blood_type' })
  // 请求星座
  getDicList('constellationList', { dicType: 'constellation_type' })
  // 



})
let flag = ref(true)
let onSubmit = async () => {
  if (!flag.value) {
    console.log(1)
    return false
  }
  let checktValidate = initValidate(rules, messages)
  if (!checktValidate.checkForm(form)) {
    uni.showToast({
      title: checktValidate.errorList[0].msg,
      icon: 'none'
    })
    return false
  }
  let result = deepClone(form)
  result.awards = result.awards.map(({ name }) => name).filter(item => item)
  result.imgUrls = result.imgUrls.split(',').filter(item => item)
  flag.value = false
  const { code, data } = await postUserInfo(result)
  if (code === 200) {
    uni.showToast({
      title: "提交成功",
      icon: 'none'
    })
    let userInfo = storage.getStorage('info')
    storage.setStorage({ ...userInfo, messageFlag: 1})
    setTimeout(() => {
      store.commit('setTabIndex', 3)
      uni.switchTab({
        url: '/pages/center/index'
      })
      flag.value = true
    }, 1000)
  } else {
    flag.value = true
  }
}
let onUploadSuccess = (urls) => {
  let result = urls.split(',')
  let idx = result.findIndex(url => url === form.coverUrl)
  if (idx === -1 || result.length === 1) {
    form.coverUrl = result[0]
  }
}
let onAddAward = (item, idx) => {
  if (!item.name) {
    uni.showToast({
      title: '请填写获奖经历',
      icon: 'none'
    })
    return false
  }
  form.awards.push({ name: '' })
}
let getIpDic = async (list, params) => {
  const { code, data } = await getOccDicName(params)
  if (code === 200) {
    dicList[list] = data
  }
}
let getDicList = async (list, params) => {
  const { code, data } = await getSearchDic(params)
  if (code === 200) {
    dicList[list] = data
  }
}
let getCountryList = async () => {
  const { code, data } = await getAllCountry()
  if (code === 200) {
    dicList.countryList = data
  }
}
let getCityList = async () => {
  const { code, data } = await getAllCity()
  if (code === 200) {
    dicList.cityList = data
  }
}
let getOccupationList = async parentId => {
  const { code, data } = await getAllUserOccupation({ parentId: '', userFlag: 0 })
  if (code === 200) {
    dicList.occupationList = data
  }
}
</script>
<style lang="scss" scoped>
.page {
  padding-bottom: calc(165rpx + env(safe-area-inset-bottom));
  background-color: #fff;

  .container {
    // background: url(https://zsjl.oss-cn-beijing.aliyuncs.com/test/xcx/info_person_bg.png) no-repeat left top/ 100% auto;
    // padding-top: 127rpx;
    .list_box {
      width: 750rpx;
      .remarks_textarea {
        width: 678rpx;
      }
    }
    .prompt {
      font-weight: 500;
      font-size: 20rpx;
      color: #CD0000;
    }

    .profile_photo {
      // width: 200rpx;
      flex-direction: row-reverse;
      // margin: 0 auto 19rpx;
      .avatar {
        width: 88rpx;
        height: 88rpx;
        border-radius: 88rpx;
        .avatar_img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .border_14 {
      border-bottom: 14rpx solid #F4F7FC;
    }

    .badge {
      position: absolute;
      width: 61rpx;
      height: 61rpx;
      left: 0;
      top: 0;
    }

    .cover_opt {
      width: 150rpx;
      height: 44rpx;
      background: #F4F7FC;
      border: 2rpx solid #D4D6D9;
      border-radius: 4rpx;
      text-align: center;
      line-height: 44rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #000000;
      margin: 20rpx auto 0;
    }

    .add_btn {
      width: 32rpx;
      height: 32rpx;
      line-height: 32rpx;
      text-align: center;
      background: #CD0000;
      border-radius: 4rpx;
      color: #FFFFFF;
      &:after {
        content: '+';
        position: absolute;
        height: 32rpx;
        left: 50%;
        top: 45%;
        transform: translate(-50%, -50%);
      }

      .del_icon {
        width: 15rpx;
        height: 14rpx;
        display: block;
        // margin-right: 8rpx;
      }

      &_confirm {
        background: #00B277;
      }
    }



  }
}

.require {}

.w_650 {
  width: 650rpx;
}
</style>